<template>
  <div class="container">
    <div class="head flex-col flex-x-center flex-y-center">
      <img class="bg" src='@/assets/images/points-back.png'>
      <span class="jifen">888</span>
      <span class="tit">当前积分余额</span>
      <div class="baner flex-row flex-x-center flex-y-center">
      	<router-link to="zhuanjifen" class="flex-col flex-y-center flex-x-center">
            <img src='@/assets/images/icon/points-ling.png'>
            <div class="subtit">领积分</div>
          </router-link>
          <router-link to="jifenduihuan" class="flex-col flex-y-center flex-x-center">
            <img src='@/assets/images/icon/points-huan.png'>
            <div class="subtit">积分兑换</div>
          </router-link>
          <router-link to="chongzhitixian" class="flex-col flex-y-center flex-x-center">
            <img src='@/assets/images/icon/points-chong.png'>
            <div class="subtit">充值/提现</div>
          </router-link>
          <router-link to="jifendashang" class="flex-col flex-y-center flex-x-center">
            <img src='@/assets/images/icon/points-shang.png'>
            <div class="subtit">积分打赏</div>
          </router-link>
      </div>
    </div>
    <div class="renwu">
    	<h4>日常任务</h4> 
    	<div class="flex flex-col flex-x-center flex-y-center ">
    		<div class="flex-row flew-y-center item bd-bottom">
    			<div class="flex-grow-0 title">推广二维码</div>
    			<div class="moneyColor flex-grow-1 flex-x-center">+10</div>
    			<div class="moneyColor flex-grow-0 tuiguan">去推广</div>
    		</div>
    		<div class="flex-row flew-y-center item bd-bottom">
    			<div class="flex-grow-0 title">邀请好友</div>
    			<div class="moneyColor flex-grow-1 flex-x-center">+10</div>
    			<div class="moneyColor flex-grow-0 tuiguan">去邀请</div>
    		</div>
    		<div class="flex-row flew-y-center item bd-bottom">
    			<div class="flex-grow-0 title">分享</div>
    			<div class="moneyColor flex-grow-1 flex-x-center">+10</div>
    			<div class="moneyColor flex-grow-0 tuiguan">去分享</div>
    		</div>
    	</div>

    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.head {
  height: 10rem;
  position: relative;
  width: 100%;
  .jifen{
  	font-size:2rem;
  	color:#fff;
  	z-index:99;
  }
  .tit{
  	font-size:.5rem;
    color:#fff;
  	z-index:99;
  }
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .baner{
  	justify-content:space-around;
  	position:absolute;
  	width:90%;
  	height:3rem;
  	background-color:#fff;
  	border-radius:5px;
  	bottom:-1.5rem;
  	left:5%;
  	font-size:.6rem;
  	.subtit{
  		color:#666;
  	}
  	img{
  		margin-bottom:.2rem;
  		height:1.5rem;
  		width:1.5rem;
  	}
  }

}
  .renwu{
	width:90%;
	margin-left:5%;
	background-color:#fff;
	margin-top:2.5rem;
	height:15rem;
	border-radius:5px;
	padding:.5rem;
	.item{
		width:100%;
		font-size:.6rem;
		padding:.5rem 0;
    .title{
      width:3rem;
    }
		.tuiguan{
			border:1px solid #F75B93;
			padding:.1rem;
			border-radius:5px;
		}
	}
	h4{
		font-size:.7rem;

	}

  }

</style>
